<template>
    <div class="app-container">
        <el-row :gutter="25">
            <!--<el-col :span="4">
                <div class="ts-pane-box">
                    <el-tabs type="border-card" >
                        <el-tab-pane label="流程分类树">
                            <ts-multi-trees
                                    style="width: 100%;height: 400px;"
                                    :options="treeOptions"
                                    ref="classifyTree"
                                    @node-click="handleNodeClick">
                            </ts-multi-trees>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>-->
            <el-col :span="24">
                <div class="ts-tabs-box">
                    <el-tabs>
                        <div>
                            <el-form inline  label-width="120px">
                                <el-form-item label="流程状态">
                                    <ts-multi-select v-model="query.isEnd" :params="selectParam" style="width: 160px"></ts-multi-select>
                                </el-form-item>
                              <el-form-item label="任务ID">
                                <el-input  size="mini" v-model="query.taskId"></el-input>
                              </el-form-item>
                                <el-form-item>
                                    <el-button icon="el-icon-search" size="mini" type="primary" @click="search">查询</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button icon="el-icon-refresh" type="primary" size="mini" @click="reset">重置</el-button>
                                </el-form-item>
                                <!--<el-form-item>
                                    <el-button icon="el-icon-search" size="mini" type="primary" @click="searchAll">查询所有分类</el-button>
                                </el-form-item>-->
                                <el-form-item>
                                    <el-button :icon="icon" type="primary" size="mini" @click="additionalQuery" ></el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                      <div  v-show="isQuery" style="margin-top: -5px">
                        <el-form inline label-width="120px">
                                <el-form-item label="流程实例ID">
                                    <el-input  size="mini" v-model="query.processInstanceId"></el-input>
                                </el-form-item>
                                <el-form-item label="任务名称">
                                    <el-input size="mini" v-model="query.taskName"></el-input>
                                </el-form-item>
                                <el-form-item label="业务主键">
                                  <el-input placeholder="请输入业务主键" size="mini" v-model="query.businessKey"></el-input>
                                </el-form-item>

                                <el-form-item :label="item.fieldName" v-for="(item, index) of plans" :key="item.id" v-show="item.isQueryCondition === 'Y'">

                                  <el-input v-if="item.fieldType != '2'"  placeholder="请输入" size="mini" v-model="query[item.fieldKey]"></el-input>

                                  <el-col :span="11" v-if="item.fieldType == '2'" style="padding: 0px">
                                    <ts-multi-date-picker v-if="item.fieldType == '2'" v-model="query[item.fieldKey + 'Before']" :params="datePickerParams" />
                                  </el-col>
                                  <el-col class="line" :span="2" v-if="item.fieldType == '2'" >-</el-col>
                                  <el-col :span="11" v-if="item.fieldType == '2'" style="padding: 0px">
                                    <ts-multi-date-picker v-if="item.fieldType == '2'" v-model="query[item.fieldKey + 'After']" :params="datePickerParams"  style="padding: 0px"></ts-multi-date-picker>
                                  </el-col>

                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="buttonDiv">
                            <el-button  type="primary" size="mini" icon="el-icon-s-promotion" @click="operation">操作</el-button>
                            <el-button  type="primary" size="mini" icon="el-icon-search" @click="showTrajectory">查询轨迹图</el-button>
                        </div>
                        <div>
                            <ts-multi-table ref="list" :query="query" :options="options" @reset-query="refreshQuery">
                                <el-table-column prop="taskId" label="任务ID" width="100" show-overflow-tooltip/>
                                <el-table-column prop="processInstanceId" width="100" label="流程实例ID"/>
                                <el-table-column prop="processDefineName" label="流程名称"/>
                                <el-table-column prop="businessKey" width="250" label="业务主键"/>
                                <el-table-column prop="beginTime" label="任务开始时间"/>
                                <el-table-column prop="endTime" label="任务结束时间"/>
                                <el-table-column prop="startUserId" label="发起人"/>
                                <el-table-column prop="activityName" label="已处理任务名称"/>
                                <el-table-column prop="processState" width="100" label="流程状态"/>
                                <el-table-column
                                    v-for="(item) of plans"
                                    v-show="item.fieldStatus !=='0'"
                                    :key="item.id"
                                    :prop="item.fieldKey"
                                    :label="item.fieldName"
                                ></el-table-column>
                            </ts-multi-table>
                        </div>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
        <ts-multi-dialog :visible.sync="trajectoryDialogVisible" :options="processTrajectoryOptions"></ts-multi-dialog>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import processTrajectoryDialog from '../wfPendTask/processTrajectoryDialog.vue'
export default {
  name: "wfCompleteTask",
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'routeMenu'
    ]),
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'nowThemeInfo': state => state.theme.nowThemeInfo
    }),
    restaurants() {
      const list = this.loadAll()
      return list.filter(item => {
        return item.url
      })
    }
  },
  data() {
    return {
      trajectoryDialogVisible: false,
      icon: 'el-icon-arrow-down',
      isQuery: false,
      selectParam: { options: [{ text: '已办未结', value: '1' }, { text: '已办已结', value: '0' }], size: 'mini' },
      isMultiSelect: false,
      endVisible: false,
      visible: false, // [必填] 是否显示Dialog，必须添加.sync修饰符
      query: {}, // 最好必填，做搜索条件扩展！！！约定
      options: { // 必填
        type: 'radio', // radio|checkbox|'' 单选/多选/无选
        // 必填，路径请结合实际业务封装的baseURL，url = base url + request url ，这里只要传 request url 如果是对象就不需要写method 如果是字符串就传接口路径 就必须配合method参数一起写
        apiName: this.$api.wfCompleteTask,
        method: 'post', // 默认走‘post’
        paramsOrdata: 'params', // 必填 ‘params’ 走token ‘data’ 走 sesson，默认是data
        apiRequiredParams: {}, // 选填 表示接口的必需恒定不变的参数
        showCancelBtn: true, // [可不填 | Boolean] 默认值true 显示取消按钮
        showConfirmBtn: true, // [可不填 | Boolean] 默认值true 显示确认按钮
        isNeedPagination: true, // 选填 是否需要分页器，默认是true
        pageNum: 1, // 选填 当前页码
        pageSize: 10, // 选填 每页条数
        pagesizes: [5, 10, 20, 50, 100], // 选填 页码间距
        layout: 'total, prev, pager, next, sizes, jumper' // 选填 分页器轮廓
      },
      processTrajectoryOptions: {
        title: '流程预览', // [必填]
        resource: processTrajectoryDialog, // 模拟懒加载组件
        modelName: 'model', // [选填] 组件页面el-form标签的:model属性值的名称，默认为'model'
        data: {}, // [可不填] 弹框中组件页面的初始化数据
        width: '70%', // [可不填] 宽度设置百分比或具体px均可，默认值50%，高度不用填会自适应
        callbacks: [null, null], // [若没有取消和确定按钮时可不填] 若取消按钮或提交按钮没有回调，可写默认值null 如[null, this.submit], tion(done, data)，done 用于关闭 Dialog, data为表单数据
        modal: true, // [可不填] 是否需要遮罩层 | boolean | 默认true
        showClose: true, // [可不填] 是否显示关闭按钮 | boolean | true
        center: false, // [可不填] 是否对头部和底部采用居中布局 | boolean | false
        fullscreen: false, // [可不填] 是否为全屏 Dialog | boolean | false
        customClass: '' // [可不填] Dialog 的自定义类名 |  | ——
      },
      treeOptions: {
        apiName: this.$api.classifyTree, // 接口 传url
        method: 'post' // 非必填 请求方式 默认post
      },
      plans: [],
      datePickerParams: {
        type: 'datetime',
        placeholder: '选择日期时间'
      }
    }
  },
  methods: {
    showTrajectory() {
      const object = this.$refs['list'].getRadioData()
      if (object == null) {
        this.$tsVue.error('请选择一条数据')
        return
      } else {
        this.processTrajectoryOptions.data = object
        this.trajectoryDialogVisible = true
      }
    },
    handleNodeClick(node) {
      this.$set(this.options.apiRequiredParams, 'classifyCode', node.code)
      // 需要重置列表的页数默认是1
      this.$refs['list'].refreshDataSource()
      if (node.plans) {
        this.plans = node.plans
      }
    },
    operation() {
      const object = this.$refs['list'].getRadioData()
      if (object == null) {
        this.$tsVue.error('请选择一条数据')
      } else {
        object['isComplete'] = true
        this.$tsVue.tansunPushNoAddTag(this, '/wf/operationPendTask', object)
      }
    },
    additionalQuery() {
      if (this.isQuery) {
        this.isQuery = false
        this.icon = 'el-icon-arrow-down'
      } else {
        this.isQuery = true
        this.icon = 'el-icon-arrow-up'
      }
    },
    // 重置
    reset() {
      this.$refs['list'].resetData()
      this.$refs['classifyTree'].resetChecked()
    },
    // 更新查询参数
    refreshQuery(query) {
      this.query = query
    },
    // 查询
    search() {
      this.$refs['list'].serchHandel()
    },
    searchAll() {
      delete this.options.apiRequiredParams.classifyCode
      this.$refs['list'].serchHandel()
    }
  },
  created() {
    this.$set(this.options.apiRequiredParams, 'userId', localStorage.getItem("User_Name"))
    this.options.initTable = true
  }
}
</script>

<style lang="scss" scoped>
    .layout {
        margin-left: 10px;
        margin-top: 10px;
    }
    .buttonDiv{
        margin-bottom: 10px;
    }
    .mright_10 {
        margin-right: 10px;
    }

    .text_color {
        color: #3B8EDA
    }
    .maintree_title {
        width:100%;
        height:35px;
        line-height:35px;
        padding-left:10px;
        background:#4586E0;
        color:#FFF;
        font-weight: bold;
    }

    .funBox {
        display: flex;
        justify-content: flex-start;
    }
    .moneyCon {
        margin-top: 20px;
        display: flex;

        .item {
            margin-left: auto;
        }
    }
</style>
